<template>
  <nw-PageTitle :title="$t('pages.userDetails')" isBack />
  <nw-PageContainer>
    <scroll-view class="lists" scroll-y>
      <view class="list">
        <view class="li">
          <view class="label">{{ $t('system.belongDept') }}</view>
          <view class="value">{{ detailInfo.userName || '--' }}</view>
        </view>
        <view class="li">
          <view class="label">{{ $t('system.userName') }}</view>
          <view class="value">{{ detailInfo.userName || '--' }}</view>
        </view>
        <view class="li">
          <view class="label">{{ $t('system.nickName') }}</view>
          <view class="value">{{ detailInfo.nickName || '--' }}</view>
        </view>
        <view class="li">
          <view class="label">{{ $t('system.role') }}</view>
          <view class="value">{{ detailInfo.moduleType || '--' }}</view>
        </view>
        <view class="li">
          <view class="label">{{ $t('system.mobileNumber') }}</view>
          <view class="value">
            {{ detailInfo.iotOperator || '--' }}
          </view>
        </view>
        <view class="li">
          <view class="label">{{ $t('system.email') }}</view>
          <view class="value">
            {{ detailInfo.deviceIndustryClassification || '--' }}
          </view>
        </view>
        <view class="li">
          <view class="label">{{ $t('public.createTime') }}</view>
          <view class="value">
            {{ detailInfo.createTime || '--' }}
          </view>
        </view>
      </view>
      <view class="btns">
        <view class="btn-wrap">
          <view class="btn" @click="handleEdit">
            <image :src="getViteImageUrl('bianji.png')" class="icon" />
            <view class="text">
              {{ $t('public.edit') }}
            </view>
          </view>
        </view>
        <view class="btn-wrap">
          <view class="btn" @click="handleDelete">
            <image :src="getViteImageUrl('shanchu.png')" class="icon" />
            <view class="text">
              {{ $t('public.delete') }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <AddOrEditUser
      v-if="addOrEditUserVisible"
      v-model="addOrEditUserVisible"
      type="edit"
      @update="getDeviceDetail"
    />
    <DeleteConfirm
      v-if="deleteConfirmVisible"
      v-model="deleteConfirmVisible"
      :data="detailInfo"
      @confirm="handleDeleteConfirm"
    />
  </nw-PageContainer>
</template>

<script setup>
import AddOrEditUser from './component/AddOrEditUser.vue'

const detailInfo = ref({})
const id = ref('') //
// 弹框参数
const addOrEditUserVisible = ref(false)
const deleteConfirmVisible = ref(false)

useBackPress()

onLoad(options => {
  console.log('页面参数-options', options)
  if (options && options.id) id.value = options.id
  // if (id.value) getDeviceDetail()
})

const getDeviceDetail = _ => {
  g_api.device
    .apiDeviceDetailInfo({
      id: id.value
    })
    .then(({ code, data }) => {
      if (code === 200 && data) {
        detailInfo.value = data
      }
    })
}
const handleEdit = item => {
  addOrEditUserVisible.value = true
  // dataItem.value = item
}

const handleDelete = item => {
  deleteConfirmVisible.value = true
  // dataItem.value = {
  //   id: item
  // }
}

const handleDeleteConfirm = data => {
  console.log('删除成功', data)
  deleteConfirmVisible.value = false
}
</script>

<style lang="scss" scoped>
.lists {
  height: 100%;
  padding: 0 20rpx 20rpx;
  box-sizing: border-box;
  .list {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    + .list {
      margin-top: 20rpx;
    }
    .li {
      display: flex;
      align-items: flex-start;
      line-height: 32rpx;
      padding: 5rpx 0;
      font-size: 26rpx;
      color: var(--color-333);
      .label {
        width: 240rpx;
        flex-shrink: 0;
      }
    }
  }
}
.btns {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  background-color: #fff;
  .btn-wrap {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    &.disabled {
      opacity: 0.5;
    }
    .icon {
      display: block;
      width: 48rpx;
      height: 48rpx;
    }
    .text {
      margin-top: 8rpx;
      font-size: 26rpx;
      color: var(--color-333);
    }
  }
}
</style>
